<template>
  <div class="reg box bg clmstart">
    <div class="backbox">
      <img
        src="@/assets/img/back.png"
        class="goback"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
    </div>
    <div class="container clmstart">
      <div class="frmbox clmstart">
        <img src="@/assets/img/regtitle.png" class="regtitle" />
        <form class="regfrm">
          <div class="regitem">
            <img src="@/assets/img/icon-uname.png" class="icon-uname" />
            <input type="text" placeholder="请输入您的姓名" v-model="uname" />
          </div>
          <div class="regitem">
            <img src="@/assets/img/icon-mobile.png" class="icon-uname" />
            <input
              type="tel"
              maxlength="11"
              placeholder="请输入您的手机号码"
              v-model="utel"
            />
          </div>
          <div class="regitem codebox">
            <img src="@/assets/img/icon-code.png" class="icon-uname" />
            <input
              type="tel"
              maxlength="4"
              placeholder="请输入验证码"
              v-model="ucode"
            />
            <button type="button" @click="getCode">{{ codetips }}</button>
          </div>
        </form>
      </div>
      <div class="btnbox" @click="putUserinfo">
        <img src="@/assets/img/regsubmit.png" />
      </div>
      <div class="secreatbox">
        <van-checkbox v-model="checked" shape="square">
          阅读并同意<span @click="lookSsecrect">用户协议以及隐私保护</span>
        </van-checkbox>
      </div>
      <!-- 丹尼斯广告 -->
      <!-- <img src="@/assets/img/dainese.png" class="dainese" /> -->
    </div>

    <!-- 注册成功提示弹框 -->
    <div class="tkbox clmcenter" v-show="succflag">
      <div class="tk_container clmstart">
        <p class="title">注册成功</p>
        <div class="tk_infobox">
          <div class="tk_info clmcenter">
            <div class="gettips">
              获得 <img src="@/assets/img/100.png" /> 积分
            </div>
            <p class="tips">每邀请1人注册+50积分(上限250积分)</p>
            <img src="@/assets/img/shareimg.png" />
          </div>
        </div>
      </div>
      <img
        src="@/assets/img/btn_back.png"
        class="backtocard"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
      <img
        src="@/assets/img/yqbtn.png"
        class="btn_share"
        @click="sharetipshow = true"
      />
    </div>
    <!-- 隐私协议 -->
    <div class="tkbox clmcenter" v-show="sflag">
      <div class="tkcontainbox">
        <div class="ruleinfo">
          <p class="rtitle">隐私保护政策</p>
          我们尊重并保护所有参与注册用户的个人隐私权。为了给您提供更准确、更有个性化的服务，我们会按照本隐私权政策的规定使用和披露您的个人信息。但我们将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，我们不会将这些信息对外披露或向第三方提供。我们会不时更新本隐私权政策。 您在同意我们服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于我们服务使用协议不可分割的一部分。
          <br />
          1. 适用范围 <br />
          a) 在注册参加我们本次活动时，您根据我们要求提供个人报名信息，该类信息包括但不限于用户的手机号、姓名、收货地址和车牌号；<br />
          b) 我们通过合法途径从商业伙伴处取得的用户个人数据。<br />
          2. 信息使用<br />
          a) 我们不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和我们单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。<br />
          b) 我们亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何我们平台用户如从事上述活动，一经发现，我们有权立即终止与该用户的服务协议。<br />
          c) 为服务用户的目的，我们可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息，或者与我们合作伙伴共享信息以便他们向您发送有关其产品和服务的信息（后者需要您的事先同意）。<br />
          d)我们可能使用您的个人信息以验证身份，预防、发现、调查可能存在的欺诈、危害安全、非法或违反与我们的协议、政策或规则的行为，以保护您、其他用户、我们的合法权益以及社会公共利益。<br />
          e)经您同意或授权的其他用途。<br />
          3. 信息披露<br />
          在如下情况下，我们将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：<br />
          a) 经您事先同意，向第三方披露；<br />
          b) 为提供您所需求的产品，而必须和第三方分享您的个人信息；<br />
          c) 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；<br />
          d)
          如您出现违反中国有关法律、法规或者我们的服务协议或相关规则的情况，需要向第三方披露；<br />
          e)
          如您是适合的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；<br />
          f) 其它我们根据法律、法规或者网站政策认为合适的披露。<br />
          4. 信息存储<br />
          a)我们依照法律法规的规定，将在境内运营过程中收集和产生的您的个人信息存储于中华人民共和国境内。如果我们向境外传输，我们将会遵循相关国家规定或者征求您的同意。<br />
          b)我们会通过安全的方式存储您的信息，包括本地存储（例如利用服务页面进行数据缓存）、数据库和服务器日志。<br />
          c)为了保护您的个人信息，我们会在平台活动结束之后，对您的相关信息进行删除或匿名化处理。<br />
          5.信息保护<br />
          a)
          我们努力为用户的信息安全提供保障，以防止信息的泄露、丢失、不当使用、未经授权访问和披露等。我们使用多方位的安全保护措施，以确保用户的个人信息保护处于合理的安全水平，包括身份鉴别、数据加密、访问控制、恶意代码防范、安全审计、技术保护手段、管理制度控制、安全体系保障等诸多方面。<br />
          b)
          尽管我们采取上述合理有效措施，并遵守相关法律规定要求的标准，但请您理解，由于技术的限制、可能存在的各种恶意手段、我们可控范围外的系统和通讯网络等方面的问题，我们难以始终保证信息百分之百的安全，但我们将尽力确保您提供给我们的个人信息的安全性，我们也建议您在使用产品和服务时充分注意对个人信息的保护，建议您采取积极措施保护个人信息的安全，不将自己的手机号码及相关个人信息透露给他人。<br />
          c)
          若发生个人信息泄露等安全事件，我们会启动应急预案，阻止安全事件扩大。安全事件发生后，我们会以公告、推送通知或邮件等形式告知您安全事件的基本情况、我们即将或已经采取的处置措施和补救措施，以及我们对您的应对建议。如果难以实现逐一告知，我们将通过公告等方式发布警示<br />
          6. 关于参与者上传素材/照片的所有权说明<br />
          a)
          投稿方/人自愿向壳牌递交素材，同时自投稿素材日起，默认同意壳牌（中国）有限公司（“壳牌”）享有本次投稿素材中涉及的人物肖像权、素材剪辑权、及成片的著作权、出版权、发行权，并同意壳牌将投稿素材的成片用于宣传、展示、展览等合法用途的宣传品以及户外广告、网络及电视广告宣传，不再另付稿酬。<br />
          b)
          投稿方/人应保证其为所投送作品的原作者，还应保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。<br />
          c)
          本次活动需采集投稿方/人的姓名、电话、单位名称、所在部门、邮箱等个人信息，用于后续作品信息沟通、活动奖励发放等相关联系。投稿方/人同意主办方按照壳牌隐私声明收集并处理个人信息。壳牌隐私声明请参见:
          <a href="https://www.shell.com.cn/zh_cn/privacy.html"
            >https://www.shell.com.cn/zh_cn/privacy.html</a
          >。<br />
          d)
          因为摄影题材特殊性，请投稿方/人在创作时，遵守相关法律法规，服从相关管理，确保自身安全。<br />
          e) 作品一经提交，即视为认同活动全部条款，本次活动最终解释权属壳牌。<br />
          7. 免责声明<br />
          (a)
          任何由于黑客攻击、计算机病毒侵入或发作、因政府管制而造成的暂时性关闭等影响网络服务和平台正常经营之不可抗力而造成的个人资料泄露、丢失、被盗用或被窜改等；<br />
          (b)
          由于与网络服务链接的其它信息网络服务所造成之个人资料泄露及由此而导致的任何法律争议和后果。<br />
          8. 解释权<br />
          本政策将根据业务模式的调整或更新不定期进行修订，该等修订构成本隐私协议的一部分。在法律许可范围内，壳牌对本次活动服务隐私权保护声明拥有修改及解释权。<br />
        </div>
      </div>
      <img src="@/assets/img/close.png" class="close" @click="sflag = false" />
    </div>
    <!-- 分享提示 -->
    <div
      class="tkbox sharetipbox"
      v-show="sharetipshow"
      @click="sharetipshow = false"
    >
      <img src="@/assets/img/sharetips.png" />
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uname: "",
      utel: "",
      ucode: "",
      codetips: "获取验证码",
      succflag: false, //注册成功
      checked: true, //隐私政策选择
      sflag: false, //隐私政策弹窗
      sharetipshow: false,
    };
  },
  methods: {
    //查看规则
    lookSsecrect() {
      this.checked = true;
      this.sflag = true;
    },
    //获取验证码
    getCode() {
      let myreg = /^1[3-9][0-9]{9}$/;
      if (this.utel == "") {
        Toast("请填写手机号！");
      } else if (!myreg.test(this.utel)) {
        Toast("手机号码不合法，请重新填写！");
      } else {
        this.$http.post("/getCheckCode", { mobile: this.utel }).then((res) => {
          if (res.data.code === 200) {
            Toast("发送成功");
            let djs = 60;
            var ts = setInterval(() => {
              this.codetips = "重新获取(" + djs + ")s";
              djs--;
              if (djs <= 0) {
                clearInterval(ts);
                this.codetips = "获取验证码";
              }
            }, 1000);
          } else {
            Toast(res.data.msg);
          }
        });
      }
    },
    //提交
    putUserinfo() {
      if (this.uname == "" || this.utel == "" || this.ucode == "") {
        Toast("请将信息填写完整！");
      } else if (!this.checked) {
        Toast("请勾选阅读并同意用户协议以及隐私保护");
      } else {
        Toast.loading({
          message: "loading...",
          forbidClick: true,
          duration: 0, //值为 0 时，toast 不会消失
          overlay: true, //是否显示背景遮罩层
        });
        const params = {
          username: this.uname,
          mobile: this.utel,
          code: this.ucode,
          s: this.getQueryVariable("s"),
        };
        this.$http.post("/register", params).then((res) => {
          Toast.clear();
          if (res.data.code === 200) {
            this.succflag = true;
          } else {
            Toast(res.data.msg);
          }
        });
      }
    },
    //获取s openid
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] === variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
};
</script>
<style lang="less" scoped>
.reg {
  overflow-y: scroll;
  .container {
    width: 100%;
    height: auto;
    margin-top: 12rem;
    .frmbox {
      position: relative;
      width: 708px;
      height: 787px;
      background: url("@/assets/img/regbox.png") no-repeat;
      background-size: contain;
      .regtitle {
        width: 72%;
        margin-top: 10rem;
      }
      .regfrm {
        width: 82%;
        margin-top: 1rem;
        .regitem {
          position: relative;
          width: 100%;
          height: 90px;
          border: 3px solid #707070;
          box-sizing: border-box;
          border-radius: 0.8rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // overflow: hidden;
          margin-top: 2.2rem;
          img {
            width: 12.7%;
          }
          input {
            width: calc(100% - 12.7%);
            height: 100%;
            font-size: 2rem;
            background: none;
            color: #000000;
          }
          //修改输入框提示文字的颜色
          input::input-placeholder {
            color: #000000;
          }
          input::-webkit-input-placeholder {
            //兼容WebKit browsers（Chrome的内核）
            color: #000000;
          }
          input::-moz-placeholder {
            //Mozilla Firefox 4 to 18
            color: #000000;
          }
          input::-moz-placeholder {
            //Mozilla Firefox 19+
            color: #000000;
          }
          input::-ms-input-placeholder {
            //Internet Explorer 10+
            color: #000000;
          }
        }
        .codebox {
          input {
            width: calc(100% - 12.7% - 230px);
          }
          button {
            position: absolute;
            top: -3px;
            right: -3px;
            width: 230px;
            height: calc(100% + 6px);
            font-size: 2rem;
            color: #ffffff;
            background-color: #de0205;
            border: 0;
            border-style: none;
            border-top-right-radius: 0.8rem;
            border-bottom-right-radius: 0.8rem;
          }
        }
      }
    }
    .btnbox {
      margin-top: 4rem;
    }
    .secreatbox {
      margin-top: 2rem;
    }
    .dainese {
      padding: 2rem 0;
    }
  }
  // 注册成功
  .tkbox {
    .tk_container {
      .tk_infobox {
        .tk_info {
          color: #000000;
          .gettips {
            font-size: 2.2rem;
            font-family: "AlibabaPuHuiTi-2-85-Bold";
            display: flex;
            justify-content: center;
            align-items: flex-end;
            img {
              padding: 0 1rem 0.5rem 0.5rem;
            }
          }
          .tips {
            font-size: 1.8rem;
            padding-top: 1.5rem;
          }
          img {
            padding-top: 1rem;
          }
        }
      }
    }
    .backtocard {
      margin-top: 4rem;
    }
    .btn_share {
      margin-top: 3rem;
    }
  }
  // 分享提示
  .sharetipbox {
    img {
      position: absolute;
      top: 1rem;
      right: 0;
      width: 57%;
    }
  }
}
@media only screen and (min-height: 1520px) {
  .reg {
    .btnbox {
      margin-top: 6rem;
    }
  }
}
</style>
<style>
.van-checkbox__label {
  line-height: 30px;
  font-size: 1.3rem;
}
</style>
